//引入path路径，npm自带的模块，直接引用
const path = require("path");
// 引入css独立安装目录模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入css压缩模块
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//引入html打包模块
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入js格式校验模块
const ESLintPlugin = require('eslint-webpack-plugin');

//引入打包公共文件模块
const CopyWebpackPlugin = require("copy-webpack-plugin");


module.exports = {
  // 入口
  entry: path.resolve(__dirname, "../src/index.js"),

  //出口
  output: {
    // 路径
    path: path.resolve(__dirname, "../build"),

    // 文件名
    filename: "./js/bundle.js"
  },

  //loader配置
  module: {
    rules: [{
        /* 
          test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
        */
        test: /\.css$/i,
        /* 
          css-loader:为了识别css类型文件进行打包
          style-loader:js把样式放在style标签中,并插入到页面中
          use后如果是一个数组,则是从后向前一致加载
        */
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        /* 
          test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
        */
        test: /\.less$/i,
        /* 
          css-loader:为了识别css类型文件进行打包
          style-loader:js把样式放在style标签中,并插入到页面中
          use后如果是一个数组,则是从后向前一致加载
        */
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 33 * 1024, // 小于30kb以下的图片会被打包成base64格式
          },
        },
        generator: {
          filename: 'images/[name][ext]'
        }
      },

    ],
  },


  // 压缩优化
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  },

  // 插件
  plugins: [new MiniCssExtractPlugin({
      //输出独立文件的文件名
      filename: './css/index.css'
    }), new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "../public/index.html"),
      minify: {
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }
    }), new ESLintPlugin({
      fix: true
    }), new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, "../public"),
        to: "public",
        //配置复制时忽略的文件
        globOptions: {
          ignore: ["**/index.html"]
        }
      }],
    }),

  ],


  //模式
  mode: "production",
};